﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>down2-演示页面</title>
    <script type="text/javascript" src="res/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="res/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/knockout.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/down2/down.js" charset="utf-8"></script>
    <script type="text/javascript" src="res/demo.js" charset="utf-8"></script>
    <script language="javascript" type="text/javascript">
        //根路径：http://localhost/down2/db/
        var pos = window.location.href.lastIndexOf("/");
        var api = [
            window.location.href.substr(0, pos + 1),
            "api/down2/"
        ].join("");
        function PageApp() {
            var _this = this;
            this.data = {
                filesSvr: ko.observableArray(),
                downer: new DownloaderMgr({
                    //配置
                    config: {
                        License2: "",//授权码
                        //赋加字段，业务逻辑字段
                        Fields: { uid: "0" },
                        //后端接口-文件
                        "UrlCreate": api + "f_create.aspx",
                        "UrlDel": api + "f_del.aspx",
                        "UrlList": api + "f_list.aspx",
                        "UrlListCmp": api + "f_list_cmp.aspx",
                        "UrlUpdate": api + "f_update.aspx",
                        "UrlDown": api + "f_down.aspx",
                        //后端接口-文件夹
                        "UrlFdData": api + "fd_data.aspx"
                    },
                    //事件
                    event: {
                        //控件加载完毕
                        ready: function () {
                            _this.load_files();
                        },
                        //选择下载目录
                        folderSel: function (dir) {
                            _this.down_folderSel(dir);
                        },
                        //添加下载任务
                        fileAppend: function (f) {
                            _this.down_fileAppend(f);
                        }
                    },
                    ui: { render: "downDiv" }
                }),
                downCur: null,
                selAll: ko.observable(false),
                sels: ko.observableArray()
            };
            this.ui = {
                tip: null
            };

            this.data.selAll.subscribe(function (nvalue) {
                var s = _this.data.filesSvr();
                _this.data.filesSvr([]);
                for (var i = 0; i < s.length; i++) {
                    s[i].sel = nvalue;
                }
                _this.data.filesSvr(s);
                _this.data.sels(s);
            });

            //加载文件列表
            this.load_files = function () {
                $.ajax({
                    type: "GET"
                    , dataType: 'jsonp'
                    , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    , url: _this.data.downer.Config["UrlListCmp"]
                    , data: { uid: _this.data.downer.Config.Fields["uid"], time: new Date().getTime() }
                    , success: function (msg) {
                        _this.ui.tip.hide();
                        if (msg.value == null) {
                            return;
                        }

                        var files = JSON.parse(decodeURIComponent(msg.value));
                        _this.load_files_cmp(files);
                    }
                    , error: function (req, txt, err) { alert("加载上传数据失败！" + req.responseText); }
                    , complete: function (req, sta) { req = null; }
                });
            };
            this.load_files_cmp = function (files) {
                _this.data.filesSvr.removeAll();
                $.each(files, function (i, n) {
                    var pv = $.extend({}, n, { sel: false });
                    _this.data.filesSvr.push(pv);
                });
                this.ui.tip.hide();
            };
            this.down_folderSel = function (dir) {
                setTimeout(function () {
                    if (_this.data.downCur != null) {
                        var o = $.extend(true, {}, _this.data.downCur,
                            { fields: { auto: "1" } });
                        _this.data.downer.addTask(o);
                        _this.data.downCur = null;
                    }
                    if (_this.data.sels().length > 0) {
                        $.each(_this.data.sels(), function (i, n) {
                            var o = $.extend(true, {}, n,
                                { fields: { auto: "1" } });
                            _this.data.downer.addTask(o);
                        });
                        _this.data.sels([]);
                    }
                }, 100);
            };
            this.down_fileAppend = function (f) {
                setTimeout(function () {
                    if (f.fields.auto == "1") _this.data.downer.start_queue();
                }, 300);
            };
            //event
            this.mouse_over = function (data, e) {
                var o = $(e.srcElement);
                if (!o.is("tr")) {
                    o = o.parent();
                    while (!o.is("tr")) o = o.parent();
                }
                o.addClass("bk-hover");
            };
            this.mouse_out = function (data, e) {
                var o = $(e.srcElement);
                if (!o.is("tr")) {
                    o = o.parent();
                    while (!o.is("tr")) o = o.parent();
                }
                o.removeClass("bk-hover");
            };
            this.btnCbk_click = function (d, e) {
                _this.data.sels.push(d);
            };
            this.btnDown_click = function (d, e) {
                if (_this.data.downer.Config["Folder"] == "") {
                    _this.data.downCur = d;
                    _this.data.downer.app.openFolder();
                    return;
                }

                _this.data.downer.addTask(
                    $.extend(true, {}, d, { fields: { auto: "1" } }));
            };
            //批量下载
            this.btnDownBat_click = function () {
                _this.data.sels([]);
                $.each(_this.data.filesSvr(), function (i, n) {
                    if (n.sel) {
                        _this.data.sels.push(n);
                    }
                });

                if (_this.data.downer.Config["Folder"] == "") {
                    _this.data.downer.app.openFolder();
                    return;
                }
                _this.down_folderSel();
            };
            //
            this.ready = function () {
                this.ui.tip = $("#tip").show();
                ko.applyBindings(_this);//
            };
        }

        $(function () {
            var app = new PageApp();
            app.ready();
        });
    </script>
    <style type="text/css">
        h5 {
            margin: 0;
        }

        p {
            font: 9pt 宋体;
        }

        ul {
            list-style-type: none;
            font: 9pt 宋体;
        }

            ul li {
                display: inline;
                margin: 0 5px 0 0;
                font: 9pt 宋体;
            }
    </style>
</head>
<body>
    <p>此页为下载控件演示页面，与up6配合使用。可以下载up6数据库中的文件和文件夹</p>
    <div id="demos"></div>
    <!--ui-->
    <p id="tip">正在加载数据</p>
    <table id="tbCmp" cellpadding="0" cellspacing="0" border="1" class="files-svr">
        <thead>
            <tr>
                <td colspan="5">
                    <a data-bind="click:btnDownBat_click"><img src="res/down2/imgs/16/down.png" />批量下载</a>
                </td>
            </tr>
        </thead>
        <tr id="tbHead">
            <td name="sel" align="center"><input type="checkbox" data-bind="checked:data.selAll" /></td>
            <td name="type">类型</td>
            <td name="name">名称</td>
            <td name="size">文件大小</td>
            <td name="op">操作</td>
        </tr>
        <tbody data-bind="foreach:data.filesSvr">
            <tr data-bind="event:{ mouseover:$parent.mouse_over,mouseout:$parent.mouse_out}">
                <td name="sel" align="center"><input type="checkbox" data-bind="checked:sel" /></td>
                <td name="type"><img src="res/down2/imgs/16/file1.png" data-bind="visible:!fdTask" /><img src="res/down2/imgs/16/folder1.png" data-bind="visible:fdTask" /></td>
                <td name="name" data-bind="text:nameLoc"></td>
                <td name="size" data-bind="text:sizeSvr"></td>
                <td name="op"><a data-bind="click:$parent.btnDown_click"><img src="res/down2/imgs/16/down.png" title='下载' /></a></td>
            </tr>
        </tbody>
    </table>
    <div id="downDiv"></div>
    <div id="msg"></div>
</body>
</html>